<template>
	<view class="content">
		<view class="content-header">
			<!-- <ad style="height: 140upx;" unit-id="adunit-89ffb1007c5b2d2b"></ad> -->
			<view class="swiper">
				<view style="display: flex;align-items: center;" @click="cityChooes">
					<view>{{city}}</view>
					<view style="width: 70upx;height: 35upx;">
						<image src="../../static/index/xl.svg" style="width: 70upx;height: 35upx;"></image>
					</view>
				</view>
				<view style="width: 75%;">
					<u-search placeholder="搜索附近优惠卷" :disabled="true" @click="search" :show-action="false"></u-search>
				</view>
			</view>
			<!-- <ad style="height: 140upx;" unit-id="adunit-89ffb1007c5b2d2b"></ad> -->
		</view>
		<view class="wrap"  >
			<u-swiper :list="lunbo" height="420" @click="getlingqu()" img-mode="scaleToFill"></u-swiper>
		</view>
		<view class="title-list">
			<image src="../../static/fll.svg" style="width: 40upx;height: 40upx;margin-right: 10upx;"></image>
			<view>优惠分类</view>
		</view>
		<view class="banner-list">
			<view class="list-yhj" v-for="(item, index) in classList" :key="index" @click="classquery(item.id)">
				<view>
					<image :src="item.img ? item.img : '../../static/yhj.svg'" style="width: 70upx;height: 70upx;">
					</image>
				</view>
				<view style="text-align: center;width: 100%;">{{item.name}}</view>
			</view>
		</view>
		<view class="title-list">
			<image src="../../static/bk.svg" style="width: 50upx;height: 50upx;margin-right: 10upx;"></image>
			<view>爆款推荐</view>
		</view>

		<al-goods-list :data="data" clickUrl="/pages/detail/index"></al-goods-list>

		<u-loadmore :status="status" style="background-color: #FFFFFF;position: relative;top: 20upx;" />
		<!-- <view style="width: 100%;margin: 0 auto;margin-top: 10rpx;">
			<ad style="width: 90%; height:100px !important;position: fixed;bottom: 0;" unit-id="adunit-01ab23ef48e284f3"></ad>
		</view> -->
		<view v-if="!isSuccess" class="coupon-content-one">
			<u-loading size="70" color="red"></u-loading>
		</view>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<u-modal v-model="show" :content="content" title="优惠卷提醒" :show-cancel-button="true" @confirm="confirm">
		</u-modal>
		<!-- <view class="lingqu" @click="getlingqu()">免费领取</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				couponId: '',
				show: false,
				content: '收到一张最新优惠卷，确认领取？',
				scrollTop: 0,
				city: '长沙市',
				keyword: '',
				key: '16e6c45880809fb397ae6c885429e912',
				dataMy: [],
				isSuccess: false,
				dataLength: 0,
				length: 10,
				status: 'loadmore',
				page: 0,
				title: 'Hello',
				count: 4,
				value: 2,
				lat: 0,
				lon: 0,
				data: [],
				classList: [],
				lunbo: [],
				typelist: ['美食餐饮', '休闲娱乐', '丽人美发', '生活服务', '亲子游玩', '免预约', '景区门票', '霸王餐']
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			// uni.getStorageSync('city')'180120126296'//
			if (e.couponId) {
				this.couponId = e.couponId
				this.show = true
			}
			
			if (e.q) {
				console.log(e.q);
				if (decodeURIComponent(e.q).indexOf('sn=') == -1) {
					this.sn = decodeURIComponent(e.q).substring(decodeURIComponent(e.q).indexOf('id=') + 3, decodeURIComponent(e.q).length);
						uni.setStorageSync('sn', this.sn)
				} else {
					this.sn =decodeURIComponent(e.q).substring(decodeURIComponent(e.q).indexOf('sn=') + 3, decodeURIComponent(e.q).length);
						uni.setStorageSync('sn', this.sn)
				}
			}
			uni.setStorageSync('ordersn', e.sn)
			this.getClass()
		},
		onShow() {
			if (this.city.indexOf('市') == -1) {
				this.city = uni.getStorageSync('city') ? uni.getStorageSync('city') + '市' : '长沙' + '市'
			} else {
				this.city = uni.getStorageSync('city') ? uni.getStorageSync('city') : '长沙' + '市'
			}
			var that = this
			this.isSuccess = false
			this.data = []
			if (uni.getStorageSync('token')) {
				// this.getCouponList()
			}
			if (this.city) {
				this.data = []
				this.getCouponList()
			} else {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log(res)
						that.lat = res.latitude
						that.lon = res.longitude
						that.loadCity(res.longitude, res.latitude)
					}
				});
			}
		},
		onReachBottom() {
			// console.log('1111')
			if (this.dataLength < 10) return;
			this.status = 'loading';
			this.page = this.length;
			this.length = this.length + 10
			setTimeout(() => {
				this.getCouponList()
				if (this.length < 10) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		watch: {
			'keyword'() {
				this.data = []
			}
		},
		methods: {
			//点击领取
			getlingqu(){
				var sn=uni.getStorageSync('sn');
			
				if(sn==''){
					//微信重新扫码
						uni.scanCode({
						    onlyFromCamera: true,
						    success: function (res) {
						        console.log('条码类型：' + res.scanType);
						        console.log('条码内容：' + res.result);
						    }
						});
				}else{
						console.log(sn);
					uni.navigateTo({
						url: '/pages/qh/index' 
					})
				}
			},
			// 查看优惠卷
			confirm() {
				this.$request('', '/api/app/coupon/setuserpasson', 'POST', {
					order_id: this.couponId
				}, {}).then(res => {
					uni.showToast({
						title: '领取中...',
						icon: 'success',
						duration: 2000,
						success: () => {
							setTimeout(function() {
								uni.navigateTo({
									url: '/pages/coupon/index'
								})
							}, 1000);
						}
					});
				})
			},
			// 分类查询
			classquery(id) {
				uni.navigateTo({
					url: '/pages/class/index?id=' + id
				})
			},
			getClass() {
				this.$request('', '/api/app/coupon/coupontype', 'POST', {}, {}).then(res => {
					this.classList = res.data
					uni.setStorageSync('url',res.url)
					for (let i in res.lunbo) {
						this.lunbo.push(res.lunbo[i])
					}
				})
			},
			cityChooes() {
				uni.navigateTo({
					url: '/pages/city_page/index?city=' + this.city
				})
			},
			search(value) {
				console.log('0000')
				uni.navigateTo({
					url: '/pages/sreach/index'
				})
			},
			loadCity(longitude, latitude) {
				const _this = this
				uni.request({
					header: {
						'Content-Type': 'application/text',
					},
					//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
					url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
						longitude +
						',' +
						latitude +
						'&key=' +
						_this.key +
						'&radius=1000&extensions=all',
					success(res) {
						if (res.statusCode === 200) {
							_this.city = res.data.regeocode.addressComponent.city
							_this.getCouponList(res.data.regeocode.addressComponent.city, res.data.regeocode
								.addressComponent.province)
							console.log(res.data.regeocode)
							// console.log('获取中文街道地理位置成功', _this.cityName)
						} else {
							console.log('获取信息失败，请重试！')
						}
					},
				})
			},
			getCouponDetail(id) {
				uni.setStorageSync('good_id', id)
				uni.navigateTo({
					url: '/pages/detail/index'
				})
			},
			getMyCouponList() {},
			getCouponList(code, province) {
				this.$request('', '/api/app/coupon/goodslist', 'POST', {
					length: this.length,
					start: this.page,
					goods_name: '',
					subtitle_title: '',
					city: this.city
				}, {}).then(res => {
					this.isSuccess = true
					for (let i in res.data) {
						this.data.push(res.data[i])
					}
					this.dataLength = res.data.length
					if (this.dataLength < 10) {
						this.status = 'nomore'
					}
					// this.status = 'nomore'	
					console.log(this.data);
					console.log(this.length);
				})
			}
		}
	}
</script>

<style lang="less">
	.list-yhj:first-child {
		margin-left: 0;
	}

	.list-yhj:nth-child(5) {
		margin-left: 0;
	}

	.list-yhj {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 40upx;
		margin-top: 20upx;
	}

	.banner-list {
		padding-left: 30upx;
		padding-right: 30upx;
		padding-bottom: 30upx;
		padding-top: 10upx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.title-list {
		padding-left: 25upx;
		padding-top: 20upx;
		font-weight: bold;
		font-size: 38upx;
		display: flex;
		align-items: center;
	}

	.wrap {
		padding: 25rpx;
	}

	page {
		background-color: #ffffff;
	}

	.coupon-content-one {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 70vh;
		// height: 100%;
		// overflow: auto;
		// padding-bottom: 400upx;
	}

	.bottom-line {
		width: 458upx;
		height: 1upx;
		border: 2upx dotted #D8D8D8;
		margin-left: 180upx;
	}

	body {
		// background-color: #EDEDED;	
	}

	.content {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
		width: 100%;
		height: 100%;
		// overflow: hidden;
		// padding-bottom: 100upx;
		background-color: #FFFFFF;
		// padding-top: 100upx;
	}

	.content-header {
		width: 750upx;
		// height: 260upx;
		// background: linear-gradient(180deg, #FFD103 0%, #F4B700 100%);
		border-radius: 0upx 0upx 40upx 40upx;
		// position: fixed;
		// top: 0;
		z-index: 999;

		.header-title {
			padding-top: 110upx;
			width: 100%;
			text-align: center;
			font-size: 32upx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #2B303D;
		}

		.swiper {
			display: flex;
			justify-content: center;
			width: 686upx;
			margin: 0 auto;
			margin-top: 34upx;
			margin-bottom: 20upx;
		}
	}

	.yhj-list {
		width: 686upx;
		// height: 100%;
		background: #FFFFFF;
		border-radius: 0upx 0upx 16upx 16upx;
		margin: 0 auto;
		margin-top: 20upx;

		.shop-header {
			width: 686upx;
			background: #2B303D;
			border-radius: 16upx 16upx 0px 0px;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding-top: 10upx;
			padding-bottom: 10upx;

			.shop-center {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 20ypx;
				padding-right: 20upx;
				padding-top: 20upx;
				padding-bottom: 20upx;

				.shop-left {
					font-size: 28upx;
					padding-left: 10upx;
					color: #FFFFFF;
				}

				.shop-right {
					color: #FFD103;
					font-size: 24upx;
					display: flex;
					margin-right: 23upx;
				}
			}
		}

		.coupon-list {
			padding-left: 24upx;
			padding-right: 24upx;

			.coupon-list-center {
				display: flex;
				margin-top: 24upx;
				padding-bottom: 64upx;

				.center-nav {
					padding-left: 24upx;

					.nav-title {
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #2B303D;
					}

					.nav-money {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 16upx;

						.tag {
							// width: 64upx;
							height: 40upx;
							background: #FFD103;
							border-radius: 8upx;
							font-size: 24upx;
							line-height: 40upx;
							text-align: center;
							padding-left: 10upx;
							padding-right: 10upx;
						}

						.sj {
							height: 40upx;
							font-size: 24upx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #2B303D;
							line-height: 40upx;
						}
					}

					.nav-js {
						width: 434upx;
						height: 66upx;
						font-size: 24upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #A7ABB6;
						line-height: 33upx;
						margin-top: 16upx;
					}
				}
			}

			.coupon-content {
				width: 100%;
				display: flex;
				margin-top: 32upx;
				padding-bottom: 27upx;
				justify-content: flex-end;
				align-items: center;
				color: #FFFFFF;

				.content-money {
					font-size: 32upx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #F57E00;
				}

				.content-money-old {
					font-size: 24upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #A7ABB6;
					margin-left: 10upx;
					text-decoration: line-through;
					margin-top: 10upx;
				}

				.content-zk {
					width: 76upx;
					height: 40upx;
					border-radius: 20upx;
					border: 1upx solid #F57E00;
					font-size: 24upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					text-align: center;
					line-height: 40upx;
					margin-left: 16upx;
					color: #F57E00;
				}

				.content--btn-ylq {
					width: 148upx;
					height: 64upx;
					background: #c1c1c1;
					border-radius: 32upx;
					font-size: 28upx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #2B303D;
					line-height: 64upx;
					text-align: center;
					margin-left: 39upx;
				}

				.content--btn {
					width: 148upx;
					height: 64upx;
					background: #FFD103;
					border-radius: 32upx;
					font-size: 28upx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #2B303D;
					line-height: 64upx;
					text-align: center;
					margin-left: 39upx;
				}
			}
		}
	}

	.lingqu {
		position: fixed;
		right: 0;
		top: 50%;
		display: flex;
		background: #19BE6B;
		border-radius: 50%;
		box-shadow: 0.375em 0.375em 0 0 rgba(15, 28, 63, 0.125);
		height: 5em;
		width: 5em;
		text-align: center;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: #FFFFFF;
		animation-name: example;
		animation-duration: 4s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		padding:2px;
	}

	/* 动画代码 */
	@keyframes example {
		0% {
			height: 4.6em;
			width: 4.6em;
			font-size: 14px;
		}

		15% {
			height: 4.7em;
			width: 4.7em;
			font-size: 15px;
		}

		25% {
			height: 4.8em;
			width: 4.8em;
			font-size: 16px;
		}
	40% {
			height: 4.9em;
			width: 4.9em;
			font-size: 17px;
		}
		50% {
			height: 5em;
			width: 5em;
			font-size: 18px;
		}

		65% {
			height: 4.9em;
			width: 4.9em;
			font-size: 17px;
		}

		75% {
			height: 4.8em;
			width: 4.8em;
			font-size: 16px;
		}

		85% {
			height: 4.7em;
			width: 4.7em;
			font-size: 15px;
		}

		100% {
			height: 4.6em;
			width: 4.6em;
			font-size: 14px;
		}
	}
</style>
